<template>
  <div id="app">
    <!-- <keep-alive>
      <router-view
        v-if="$route.meta.keepAlive"
        :key="$route.fullPath"
      ></router-view>
    </keep-alive> -->
    <!-- <router-view
      v-if="!$route.meta.keepAlive"
      :key="$route.fullPath"
    ></router-view> -->
    <keep-alive
      :exclude="[
        'LoginView',
        'BrowseHistory',
        'UserFavorites',
        'FavoriteDetail',
        'MineView',
        'ArticleView',
        'MineFollow',
        'UserView',
        'UserFollow',
        'UserFan',
        'SearchRecommendView',
        'SearchCategorieView',
        'SearchingView',
        'SearchedView',
        'HotCategorieView',
        'GlobalSelection',
        'HotMovier',
        'NotesView',
        'NoteDetail',
      ]"
    >
      <router-view :key="$route.fullPath"></router-view>
    </keep-alive>
    <div class="likefooter" v-if="$route.meta.showFooter"></div>
    <footer v-if="$route.meta.showFooter">
      <div class="footer-nav">
        <router-link
          to="/"
          :class="{ active: $route.matched[0].name == 'home' }"
        >
          <div class="icon">
            <svg
              v-if="$route.matched[0].name == 'home'"
              t="1676983176134"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2700"
              width="32"
              height="32"
            >
              <path
                d="M982.028557 404.405174 573.32303 83.942886c-34.918864-27.694272-89.619352-27.694272-124.538216 0L43.175542 404.577188c-13.933143 11.008903-16.169326 31.134554-5.332437 44.895683s31.134554 16.169326 44.895683 5.332437l13.073072-10.320847 0 387.547791c0 54.872501 56.936671 95.983874 107.852847 95.983874l639.892491 0c50.22812 0 84.1149-38.531161 84.1149-95.983874L927.672098 443.452377l14.449185 11.352931c5.84848 4.644381 12.729044 6.880564 19.781623 6.880564 9.460776 0 18.921552-4.128339 25.286074-12.213002C998.369898 435.539728 995.789686 415.414077 982.028557 404.405174zM607.897867 797.113388l0 66.741475-63.989249 0-63.989249 0-63.989249 0 0-66.741475 0-112.325214c0-37.155048 30.102469-77.234336 95.983874-77.234336 66.053418 0 95.983874 40.079288 95.983874 77.234336L607.897867 797.113388 607.897867 797.113388z"
                fill="#2c2c2c"
                p-id="2701"
              ></path>
            </svg>
            <svg
              v-else
              t="1676985505136"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2875"
              id="mx_n_1676985505137"
              width="16"
              height="16"
            >
              <path
                d="M979.792374 404.577188 574.183101 83.942886c-34.918864-27.694272-89.619352-27.694272-124.538216 0L44.207626 404.577188c-13.933143 11.008903-16.169326 31.134554-5.332437 44.895683s30.618512 16.169326 44.551655 5.332437l12.55703-10.320847 0 387.547791c0 54.872501 57.968755 95.983874 108.712918 95.983874l639.892491 0c50.22812 0 83.254829-38.531161 83.254829-95.983874L927.844112 445.860575l11.69696 8.944734c5.84848 4.644381 13.073072 6.880564 20.125651 6.880564 9.460776 0 18.921552-4.128339 25.286074-12.213002C995.9617 435.711742 993.725517 415.586091 979.792374 404.577188zM479.919368 864.026877 479.919368 686.508315c0-8.77272 15.997312-13.245087 31.994625-13.245087s31.994625 4.472367 31.994625 13.245087l0 177.346548L479.919368 864.026877 479.919368 864.026877zM864.026877 832.032253c0 21.157736-5.84848 31.994625-19.26558 31.994625L608.585923 864.026877c0-0.516042-0.688056-0.860071-0.688056-1.376113L607.897867 686.508315c0-37.155048-29.930455-77.234336-95.983874-77.234336s-95.983874 40.079288-95.983874 77.234336l0 176.142449c0 0.516042 0.860071 0.860071 0.860071 1.376113L204.868806 864.026877c-20.125651 0-44.723669-17.373425-44.723669-31.994625L160.145137 393.740299 488.864102 134.171006c11.868974-9.288762 33.198723-9.288762 44.895683 0l330.095078 261.11742L863.854863 832.032253z"
                fill="#999999"
                p-id="2876"
              ></path>
            </svg>
          </div>
          <div class="text">首页</div></router-link
        >
      </div>
      <div class="footer-nav">
        <router-link
          to="notes"
          :class="{ active: $route.matched[0].name == 'notes' }"
        >
          <div class="icon">
            <svg
              v-if="$route.path == '/notes'"
              t="1676986633529"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2334"
              width="32"
              height="32"
            >
              <path
                d="M851.2 0 288 0C211.2 0 153.6 57.6 153.6 134.4l0 19.2c-64 12.8-108.8 70.4-108.8 140.8 0 44.8 19.2 83.2 51.2 108.8C64 428.8 44.8 467.2 44.8 512S64 595.2 96 620.8c-32 25.6-51.2 64-51.2 108.8 0 70.4 44.8 121.6 108.8 140.8l0 19.2c0 70.4 57.6 134.4 134.4 134.4l563.2 0c70.4 0 134.4-57.6 134.4-134.4L985.6 134.4C979.2 57.6 921.6 0 851.2 0zM153.6 800c-25.6-12.8-44.8-38.4-44.8-70.4 0-32 19.2-57.6 44.8-70.4L153.6 800zM153.6 582.4C128 569.6 108.8 544 108.8 512c0-32 19.2-57.6 44.8-70.4L153.6 582.4zM153.6 358.4C128 352 108.8 320 108.8 294.4c0-32 19.2-57.6 44.8-70.4L153.6 358.4zM812.8 793.6 352 793.6l0-64 460.8 0L812.8 793.6zM812.8 563.2 352 563.2l0-64 460.8 0L812.8 563.2zM812.8 294.4 352 294.4l0-64 460.8 0L812.8 294.4z"
                p-id="2335"
                fill="#2c2c2c"
              ></path>
            </svg>
            <svg
              v-else
              t="1676986601528"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2129"
              width="16"
              height="16"
            >
              <path
                d="M806.4 0 243.2 0C166.4 0 108.8 57.6 108.8 134.4l0 19.2C44.8 166.4 0 224 0 294.4c0 44.8 19.2 83.2 51.2 108.8C19.2 428.8 0 467.2 0 512c0 44.8 19.2 83.2 51.2 108.8-32 25.6-51.2 64-51.2 108.8 0 70.4 44.8 121.6 108.8 140.8l0 19.2c0 70.4 57.6 134.4 134.4 134.4l563.2 0c70.4 0 134.4-57.6 134.4-134.4L940.8 134.4C934.4 57.6 876.8 0 806.4 0zM108.8 582.4C83.2 569.6 64 544 64 512c0-32 19.2-57.6 44.8-70.4L108.8 582.4zM108.8 224l0 140.8C83.2 352 64 320 64 294.4S83.2 236.8 108.8 224zM64 729.6c0-32 19.2-57.6 44.8-70.4l0 140.8C83.2 787.2 64 761.6 64 729.6zM870.4 889.6c0 38.4-32 64-64 64L243.2 953.6c-38.4 0-64-32-64-64l0-19.2 0-217.6 0-64L179.2 435.2l0-64L179.2 147.2 179.2 134.4c0-38.4 32-64 64-64l563.2 0c38.4 0 64 32 64 64L870.4 889.6z"
                p-id="2130"
                fill="#999999"
              ></path>
              <path
                d="M307.2 230.4l460.8 0 0 64-460.8 0 0-64Z"
                p-id="2131"
                fill="#999999"
              ></path>
              <path
                d="M307.2 492.8l460.8 0 0 64-460.8 0 0-64Z"
                p-id="2132"
                fill="#999999"
              ></path>
              <path
                d="M307.2 729.6l460.8 0 0 64-460.8 0 0-64Z"
                p-id="2133"
                fill="#999999"
              ></path>
            </svg>
          </div>
          <div class="text">手记</div></router-link
        >
      </div>
      <div class="footer-nav">
        <router-link
          to="search"
          :class="{ active: $route.matched[0].name == 'search' }"
        >
          <div class="icon">
            <svg
              v-if="$route.path == '/search'"
              t="1676986770214"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="16305"
              width="32"
              height="32"
            >
              <path
                d="M502.0672 51.2C744.448 51.2 940.8512 247.5008 940.8512 489.5744c0 106.0864-37.6832 203.3664-100.4544 279.1424l-1.9456 2.2528 0.7168 0.4096c3.2768 2.1504 6.2464 4.608 9.0112 7.3728l95.744 95.6416c22.528 22.528 22.528 58.9824 0 81.408-22.528 22.528-58.9824 22.528-81.5104 0L766.6688 860.16c-3.9936-3.9936-7.4752-8.6016-10.1376-13.6192a437.4016 437.4016 0 0 1-254.464 81.2032c-242.3808 0-438.784-196.3008-438.784-438.3744S259.6864 51.2 502.0672 51.2z m11.9808 87.9616c-190.976 0-345.9072 154.9312-345.9072 345.9072 0 15.2576 12.4928 27.648 27.648 27.648 15.2576 0 27.648-12.4928 27.648-27.648C223.4368 324.608 353.4848 194.56 513.9456 194.56c15.2576 0 27.648-12.4928 27.648-27.648 0.2048-15.2576-12.288-27.7504-27.5456-27.7504z"
                fill="#000000"
                p-id="16306"
              ></path>
            </svg>
            <svg
              v-else
              t="1676986824459"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="17314"
              width="16"
              height="16"
            >
              <path
                d="M957.6 868.8l-106.4-106.4c54.4-73.6 87.2-164.8 87.2-263.2 0-243.2-197.6-440.8-440.8-440.8s-440 198.4-440 441.6 197.6 440.8 440.8 440.8c98.4 0 189.6-32.8 263.2-87.2l106.4 106.4c12.8 12.8 28.8 18.4 45.6 18.4s32.8-6.4 45.6-18.4c23.2-25.6 23.2-66.4-1.6-91.2z m-459.2-56.8c-172 0-312.8-140-312.8-312.8 0-172 140-312.8 312.8-312.8 172 0 312.8 140 312.8 312.8-0.8 172.8-140.8 312.8-312.8 312.8z"
                p-id="17315"
                fill="#999999"
              ></path>
            </svg>
          </div>
          <div class="text">搜索</div></router-link
        >
      </div>
      <!-- <div class="footer-nav">
        <router-link
          to="classroom"
          :class="{ active: $route.matched[0].name == 'classroom' }"
        >
          <div class="icon">
            <svg
              v-if="$route.path == '/classroom'"
              t="1676987151216"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="25121"
              width="32"
              height="32"
            >
              <path
                d="M800 510.001l0.001 241.634c0 80.634-65.366 146-146 146h-285c-80.633 0-146-65.366-146-146L223 511.655l261.753 116.968a60 60 0 0 0 48.294 0.292l0.6-0.263L800 510z m106.5 129.866c17.95 0 32.5 14.55 32.5 32.5 0 17.949-14.55 32.5-32.5 32.5s-32.5-14.551-32.5-32.5c0-17.95 14.55-32.5 32.5-32.5zM515.783 154l0.645 0.006a64.982 64.982 0 0 1 25.821 5.728l451.576 203.38c7.554 3.403 10.92 12.284 7.517 19.837a15 15 0 0 1-7.573 7.542L934 417.118 934 587.5c0 15.188-12.312 27.5-27.5 27.5S879 602.688 879 587.5V441.618L534.645 595.017a59.983 59.983 0 0 1-23.809 5.189l-0.64 0.003a59.984 59.984 0 0 1-24.445-5.221L28.454 390.636c-7.564-3.38-10.955-12.251-7.575-19.815a15 15 0 0 1 7.63-7.6L489.278 159.55A64.983 64.983 0 0 1 515.783 154z"
                fill="#000000"
                p-id="25122"
              ></path>
            </svg>
            <svg
              v-else
              t="1676987110251"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="24744"
              width="32"
              height="32"
            >
              <path
                d="M486.128 106.205a50.286 50.286 0 0 1 51.744 0L930.51 341.788c17.288 10.373 26.095 29.494 24.158 48.305l-0.001 164.574c0 17.673-14.327 32-32 32-17.497 0-31.713-14.042-31.996-31.471l-0.004-0.53-0.001-99.66-69.333 46.8v183.772a202.667 202.667 0 0 1-57.69 141.618C698.092 894.303 613.539 928 512 928c-101.538 0-186.091-33.697-251.644-100.805a202.668 202.668 0 0 1-57.683-140.03l-0.006-1.587-0.001-183.771-111.438-75.22c-22.788-15.382-28.96-46.17-14.005-69.12l0.46-0.693a50.286 50.286 0 0 1 15.807-14.986z m271.205 438.802l-217.2 146.61a50.286 50.286 0 0 1-56.266 0l-217.201-146.61v140.571c0 36.214 14.167 70.99 39.472 96.896C359.323 836.92 427.271 864 512 864c84.728 0 152.677-27.08 205.862-81.526a138.667 138.667 0 0 0 39.467-95.81l0.004-1.086V545.007zM512 165.317L144.882 385.588l367.117 247.804 367.118-247.804L512 165.317z"
                fill="#999999"
                p-id="24745"
              ></path>
            </svg>
          </div>
          <div class="text">课堂</div></router-link
        >
      </div> -->
      <div class="footer-nav">
        <router-link
          to="mine"
          :class="{ active: $route.matched[0].name == 'mine' }"
        >
          <div class="icon">
            <svg
              v-if="$route.path == '/mine'"
              t="1676987398447"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="45773"
              width="32"
              height="32"
            >
              <path
                d="M513.024 65.536q93.184 0 175.616 35.84t143.872 97.28 97.28 143.872 35.84 175.616q0 94.208-35.84 176.64t-97.28 143.872-143.872 97.28-175.616 35.84q-94.208 0-176.64-35.84t-143.872-97.28-97.28-143.872-35.84-176.64q0-93.184 35.84-175.616t97.28-143.872 143.872-97.28 176.64-35.84zM513.024 909.312q80.896 0 152.064-30.72t124.416-83.968 83.968-124.416 30.72-152.064-30.72-152.064-83.968-124.416-124.416-83.968-152.064-30.72q-81.92 0-153.088 30.72t-124.416 83.968-83.968 124.416-30.72 152.064 30.72 152.064 83.968 124.416 124.416 83.968 153.088 30.72zM513.024 190.464q66.56 0 124.928 25.088t102.4 69.12 69.12 102.4 25.088 124.928-25.088 125.44-69.12 102.912-102.4 69.12-124.928 25.088-125.44-25.088-102.912-69.12-69.12-102.912-25.088-125.44 25.088-124.928 69.12-102.4 102.912-69.12 125.44-25.088z"
                p-id="45774"
                fill="#000000"
              ></path>
            </svg>
            <svg
              v-else
              t="1676987436047"
              class="icon"
              viewBox="0 0 1194 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="46925"
              width="32"
              height="32"
            >
              <path
                d="M597.333333 1024a512 512 0 1 1 512-512 512 512 0 0 1-512 512z m0-914.2784A402.2784 402.2784 0 1 0 999.611733 512 402.2784 402.2784 0 0 0 597.333333 109.7216zM597.333333 768a256 256 0 1 1 256-256 256 256 0 0 1-256 256z m0-402.2784A146.2784 146.2784 0 1 0 743.611733 512 146.2784 146.2784 0 0 0 597.333333 365.7216z"
                fill="#999999"
                p-id="46926"
              ></path>
            </svg>
          </div>
          <div class="text">我的</div></router-link
        >
      </div>
    </footer>
    <van-share-sheet
      v-model="isShowShare"
      title="立即分享给好友"
      :options="shareOptions"
      @select="onSelect"
      @click-overlay="changeShare"
      @cancel="changeShare"
    />
  </div>
</template>

<script>
import { mapMutations } from "vuex";

export default {
  data() {
    return {
      shareOptions: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
    };
  },
  mounted() {
    // console.log(JSON.stringify([{"title":"默认收藏夹","list":[]}]));
    if (!localStorage.getItem("nsCollects")) {
      localStorage.setItem(
        "nsCollects",
        JSON.stringify([{"title":"默认收藏夹","list":[]}])
      );
    }
  },
  computed: {
    // ...mapState(["isShowShare"]),
    isShowShare: {
      get() {
        return this.$store.state.isShowShare;
      },
      set() {},
    },
  },
  methods: {
    ...mapMutations(["changeShare"]),
    onSelect(option) {
      this.$toast(option.name);
      this.changeShare();
    },
  },
};
</script>

<style lang="scss" scoped>
#app {
  // padding-bottom: 50px;

  .likefooter {
    height: 50px;
  }

  footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: white;
    display: flex;
    align-items: center;
    // justify-content: space-between;
    justify-content: space-around;
    border-top: 1px solid #f2f2f2;

    .footer-nav {
      width: 20%;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #999;

      a {
        font-size: 12px;
        color: #999;

        .icon {
          width: 25px;
          height: 25px;
          margin-bottom: 3px;
        }
      }

      // .router-link-active {
      //   color: #000;
      // }

      .active {
        color: #000;
      }
    }
  }
}
</style>
